<template>
	<view class="container">
		<view class="wrap">
			<swiper class="swiper" circular :indicator-dots="carouselImage.length>1" :autoplay="autoplay">
				<swiper-item v-for="(i,index) in carouselImage" :key="i">
					<image lazy-load :lazy-load-margin="0" style="width: 100%; height: 240rpx;" mode="scaleToFill"
						:src="i"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="adrees">
			<Address></Address>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		toRefs
	} from 'vue'
	import Address from "../../components/Address.vue"
	const data = reactive({
		autoplay: true,
		carouselImage: ['../../static/proImage/wlBanner.jpeg']
	})
	const {
		autoplay,
		carouselImage
	} = toRefs(data)
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100%;
		background-color: #999;
		box-sizing: border-box;
		padding: 20rpx 30rpx 30rpx;
	}

	.wrap {
		width: 100%;
		height: 240rpx;
		border-radius: 20rpx;
		overflow: hidden;

		.swiper {
			height: 240rpx;
			z-index: 999;

			&-item {
				display: block;
				height: 240rpx;
				line-height: 240rpx;
				text-align: center;
			}

			&-list {
				margin-top: 40rpx;
				margin-bottom: 0;
			}
		}
	}

	.adrees {
		width: 100%;
		border-radius: 20rpx;
		background-color: #fff;
		margin-top: 30rpx;
		box-sizing: border-box;
		padding: 20rpx;
	}
</style>